<template>
  <div class="TheValueOfPatents clearfix">
    <h2> {{patent.Header && patent.Header.ApplNO}}&nbsp;&nbsp;&nbsp;&nbsp;{{patent.Title}}</h2>
    <div class="charts-con">
      <div class="charts-main">
          <div class="charts-topbar">
            <span class="btns fr">
            </span>
          </div>
          <div class="echarts h400">
            <div id="chartOne"></div>
          </div>
          <div class="charts-bottombar">
          </div>
      </div>
    </div>
    <div class="details">
      <p class="details-title">评估价值总分 : <span class="details-one">{{Total}}</span><span class="details-two"> / 100</span></p>
        <div class="space-between details-con">
          <div class="details-main space-between" v-for="(item,i) in details">
            <div class="details-left">
              {{item.title}}
            </div>
            <div class="details-right">
              <p class="detail-title">{{item.name}} : <span class="detail-one">{{item.value}}</span><span class="detail-two"> / {{item.sum}}</span></p>
              <div class="schedule-con"><div class="schedule-now" :style="{width:item.value+'%'}"></div></div>
              <p class="detail-info">
                {{item.info}}
              </p>
            </div>
          </div>
        </div>
    </div>
              

  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "PatentValue",
  data() {
    return {
      Total: 0,
      details: [
        {
          title: "Q",
          name: "专利质量",
          value: 0,
          sum: 100,
          info: "是从特征数量、权项数量、引用情况、稳定性等10个维度对专利质量进行评价。"
        },
        {
          title: "T",
          name: "技术质量",
          value: 0,
          sum: 100,
          info: "是从创新程度、技术时效、技术宽度、生命周期维度评价专利技术价值。"
        },
        {
          title: "M",
          name: "市场价值",
          value: 0,
          sum: 100,
          info: "是从投融资情况、行业基数、转让许可、质押融资、市场势能等维度评价市场价值。"
        },
        {
          title: "S",
          name: "社会价值",
          value: 0,
          sum: 50,
          info: "是从复审无效、焦点事件、政策法规等维度评价专利的社会价值。"
        }
      ],
      patent: {},
      chartOne: null,
      chartOneOption: {
        title: [
          {
            text: "0",
            left: "19%",
            bottom: "18%",
            textStyle: {
              fontSize: 16,
              color: "#4f63c8"
            }
          },
          {
            text: "0",
            right: "19%",
            bottom: "18%",
            textStyle: {
              fontSize: 16,
              color: "#4f63c8"
            }
          }
        ],
        series: [
          {
            name: "总分",
            type: "gauge",
            z:1,
            min: 0,
            max: 100,
            radius: "100%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 14,
                color: [[0.25, "#8ddcd9"], [0.75, "#7ec0fd"], [1, "#f77f7f"]]
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 18, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 22, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            axisLabel: {
              color: "#b0b5ce"
            },
            pointer: {
              width: 4,
              length: "70%"
            },
            title: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              fontSize: 20,
              offsetCenter: [0, "-60%"]
            },
            detail: {
              fontSize: 48,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#4f63c8",
              offsetCenter: [0, "75%"]
            },
            data: [{ value: 0, name: "总分" }]
          },
          {
            name: "Q",
            type: "gauge",
            center: ["20%", "50%"], // 默认全局居中
            radius: "50%",
            min: 0,
            max: 100,
            z:1,
            startAngle: 155,
            endAngle: 25,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8,
                color: [[0.25, "#8ddcd9"], [0.75, "#7ec0fd"], [1, "#f77f7f"]]
              }
            },
            axisTick: {
              // 坐标轴小标记
              splitNumber: 5,
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            axisLabel: {
              color: "#b0b5ce",
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "100":
                    return "100";
                }
              }
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 2,
              length: "70%"
            },
            title: {
              show: true,
              fontWeight: "bolder",
              offsetCenter: [0, "-70%"]
            },
            detail: {
              fontSize: 18,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#4f63c8",
              offsetCenter: [0, "-120%"]
            },
            data: [{ value: 0, name: "Q" }]
          },
          {
            name: "T",
            type: "gauge",
            center: ["20%", "50%"], // 默认全局居中
            radius: "50%",
            min: 0,
            max: 100,
            z:1,
            startAngle: 335,
            endAngle: 205,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8,
                color: [[0.25, "#f77f7f"], [0.75, "#7ec0fd"], [1, "#8ddcd9"]]
              }
            },
            axisTick: {
              // 坐标轴小标记
              show: false
            },
            axisLabel: {
              color: "#b0b5ce",
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "100";
                  case "100":
                    return "0";
                }
              }
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 2
            },
            title: {
              show: true,
              fontWeight: "bolder",
              offsetCenter: [0, "70%"]
            },
            detail: {
              show: false,
              fontSize: 18,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#4f63c8",
              offsetCenter: [0, "120%"]
            },
            data: [{ value: 0, name: "T" }]
          },
          {
            name: "M",
            type: "gauge",
            center: ["80%", "50%"], // 默认全局居中
            radius: "50%",
            min: 0,
            max: 100,
            z:1,
            startAngle: 155,
            endAngle: 25,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8,
                color: [[0.25, "#8ddcd9"], [0.75, "#7ec0fd"], [1, "#f77f7f"]]
              }
            },
            axisTick: {
              // 坐标轴小标记
              splitNumber: 5,
              length: 10, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            axisLabel: {
              color: "#b0b5ce",
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "100":
                    return "100";
                }
              }
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 2
            },
            title: {
              show: true,
              fontWeight: "bolder",
              offsetCenter: [0, "-70%"]
            },
            detail: {
              fontSize: 18,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#4f63c8",
              offsetCenter: [0, "-120%"]
            },
            data: [{ value: 0, name: "M" }]
          },
          {
            name: "S",
            type: "gauge",
            center: ["80%", "50%"], // 默认全局居中
            radius: "50%",
            min: 0,
            max: 50,
            z:1,
            startAngle: 335,
            endAngle: 205,
            splitNumber: 4,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8,
                color: [[0.25, "#f77f7f"], [0.75, "#7ec0fd"], [1, "#8ddcd9"]]
              }
            },
            axisTick: {
              // 坐标轴小标记
              show: false
            },
            axisLabel: {
              color: "#b0b5ce",
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "50";
                  case "50":
                    return "0";
                }
              }
            },
            splitLine: {
              // 分隔线
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 2
            },
            title: {
              show: true,
              fontWeight: "bolder",
              offsetCenter: [0, "70%"]
            },
            detail: {
              show: false,
              fontSize: 18,
              fontWeight: "bolder",
              fontFamily: "Arial",
              width: 100,
              color: "#4f63c8",
              offsetCenter: [0, "120%"]
            },
            data: [{ value: 0, name: "S" }]
          },
          {
            name:'',
            z:0,
            type:'pie',
            radius: ['35%', '35.8%'],
            hoverAnimation: false,
            label: {
                show:false
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle:{
                color:"rgba(200,200,200,0.2)",
                opacity:1,
                shadowColor:"#000",
                shadowBlur:15
                
            },
            data:[
                {value:0, name:''}
            ]
        },
          {
            name:'',
            type:'pie',
            z:2,
            radius: ['1%', '3%'],
            color:"#4f63c8",
            hoverAnimation: false,
            label: {
                show:false
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:0, name:''}
            ]
        },
        {
            name:'',
            type:'pie',
            z:2,
            center: ["80%", "50%"],
            radius: ['1%', '3%'],
            color:"#4f63c8",
            hoverAnimation: false,
            label: {
                show:false
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:0, name:''}
            ]
        },
        {
            name:'',
            type:'pie',
            z:2,
            center: ["20%", "50%"],
            radius: ['1%', '3%'],
            color:"#4f63c8",
            hoverAnimation: false,
            label: {
                show:false
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:0, name:''}
            ]
        },
        ]
      }
    };
  },
  methods: {
    /*
   * params: 无
   * return: 无
   * function: 获取PN号
   * */
    getPatentInfo() {
      let spn = this.$route.query.pn;
      this.$post(this.$Url.patent.invokejson, {
          spn: spn,
          sl: "chs",
          sf: "ShowPatent",
          sx: "showpatent_cn"
        })
        .then(response => {
          if (
            response.data &&
            response.data.data &&
            response.data.data.Patent
          ) {
            this.patent = response.data.data.Patent;
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    getOneCharts: function() {
      let ths = this;
      let pn = ths.$route.query.pn;
      this.$post(this.$Url.patent.valueanalysis2, {
          applyNum: pn
        })
        .then(response => {
          if (response.data && response.data.data) {
            this.Total = response.data.data.J;
            this.details[0].value = response.data.data.Q;
            this.details[1].value = response.data.data.T;
            this.details[2].value = response.data.data.M;
            this.details[3].value = response.data.data.S;
            this.chartOne.setOption({
              title: [
                {
                  text: response.data.data.T,
                  left: "19%",
                  bottom: "18%",
                  textStyle: {
                    fontSize: 16,
                    color: "#4f63c8"
                  }
                },
                {
                  text: response.data.data.S,
                  right: "19%",
                  bottom: "18%",
                  textStyle: {
                    fontSize: 16,
                    color: "#4f63c8"
                  }
                }
              ],
              series: [
                {
                  name: "总分",
                  data: [{ value: response.data.data.J, name: "总分" }]
                },
                {
                  name: "Q",
                  data: [{ value: response.data.data.Q, name: "Q" }]
                },
                {
                  name: "T",
                  data: [{ value: 100 - response.data.data.T, name: "T" }]
                },
                {
                  name: "M",
                  data: [{ value: response.data.data.M, name: "M" }]
                },
                {
                  name: "S",
                  data: [{ value: 50 - response.data.data.S, name: "S" }]
                }
              ]
            });
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    chartsResize() {
      let ths = this,
        resizeTimer = null;
      $(window).on("resize", function() {
        if (resizeTimer) {
          clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function() {
          ths.chartOne.resize();
        }, 400);
      });
    },
    setChartOne: function(option) {
      this.chartOne.setOption(option);
    },
    getCharts: function() {
      this.chartOne = this.$echarts.init(document.getElementById("chartOne"));
    }
  },
  mounted: function() {
    let ths = this;
    //获取图表容器
    this.getPatentInfo();
    this.getCharts();
    this.setChartOne(this.chartOneOption);
    this.getOneCharts();
    // 图表自适应
    this.chartsResize();
  }
};
</script>

<style scoped lang="scss">
.TheValueOfPatents {
  width: 1200px;
  min-height: 800px;
  background-color: #fff;
  margin: 20px auto;
  padding: 20px;
  box-sizing: border-box;
  h2 {
    font-size: 24px;
    text-align: center;
    line-height: 80px;
    border-bottom: 1px solid #f0f1f3;
  }
  .charts-con {
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    .charts-title {
      font-size: 14px;
      font-weight: bold;
      line-height: 40px;
      background-color: #f9fbfd;
      border-bottom: 1px solid #f0f1f3;
      box-sizing: border-box;
      padding: 0 20px;
    }
    .charts-main {
      padding: 20px;
      background-color: #fff;
      // height: 435px;
      .echarts {
        width: 100%;
        position: relative;
      }
      .h320 {
        height: 320px;
      }
      .h550 {
        height: 550px;
      }
      .h400 {
        height: 400px;
      }
    }
    .el-select + .el-select {
      margin-left: 10px;
    }
  }
  .space-between {
    display: flex;
    justify-content: space-between;
  }
  .details {
    padding: 0 40px;
    .details-title {
      font-size: 18px;
      font-weight: bold;
      color: #000;
    }
    .details-con {
      background-color: #f9fafc;
    }
    .details-one {
      font-size: 40px;
      font-weight: bold;
      color: #4f63c8;
    }
    .details-two {
      font-size: 20px;
      color: #9e9e9e;
    }
    .detail-title {
      padding: 0;
      margin: 0;
      font-size: 14px;
      font-weight: bold;
      color: #000;
    }
    .detail-one {
      font-size: 20px;
      font-weight: bold;
      color: #4f63c8;
    }
    .detail-two {
      font-size: 12px;
      color: #9e9e9e;
    }
    .schedule-con {
      height: 6px;
      background-color: #ebf1fc;
      border-radius: 3px;
      margin-top: 10px;
      .schedule-now {
        height: 6px;
        background-color: #4f63c8;
        border-radius: 3px;
      }
    }
    .details-main {
      padding: 30px;
      .details-left {
        font-size: 40px;
        font-weight: bold;
        color: #9b9b9b;
        margin-right: 20px;
      }
    }
    .detail-info {
      font-size: 12px;
      color: #a5a5a5;
    }
  }
  #chartOne {
    width: 100%;
    height: 100%;
  }
}
</style>
